<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="vue1">
    <table>
        <tr v-for="(user,index) in users":key="index">
            <td v-text="index+1"></td>
            <td v-text="user.name"></td>
            <td v-text="user.age"></td>
            <td v-text="user.gender"></td>
        </tr>
    </table>
</div>
=================================================
<div id="vue2">
    <table>
        <tr v-for="(val,key,index) in users">
            <td v-text="index+1"></td>
            <td v-text="key"></td>
            <td v-text="val"></td>
        </tr>
    </table>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#vue1",
        data:{
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'有哥', gender:'男', age: 30},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        }
    })
</script>

<script type="text/javascript">
    new Vue({
        el:"#vue2",
        data:{
            users: {name:'柳岩', gender:'女', age: 21}
        }
    })
</script>

</body>
</html>